<template>
	<view class="viewbg">
		<view class="header">
			<view style="display: grid;margin: 120rpx 0 0 40rpx;">
				<view style="font-size: 42rpx;font-weight: 600;margin-bottom: 20rpx;">
					会员好课免费看
				</view>
				<view style="color: #6D6D6D;font-size: 24rpx;">
					每周五20:00限时免费
				</view>
			</view>
		</view>
		<view class="content"
			style="background-color: white;height: calc(100vh - 180rpx);border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
			<view style="margin: 0 20rpx;width: calc(100% - 40rpx);">
				<v-tabs style="padding-top: 20rpx;" v-model="current" :tabs="tabs" :pills="true" line-height="0"
					pillsColor="#FFEACD" color="#CD665E" activeColor="#CD665E" :scroll="false"
					@change="changeTab"></v-tabs>
			</view>

			<view style="font-size: 30rpx;font-weight: 500;margin: 20rpx 0 0 40rpx;">
				截止时间-7月4日19:59
			</view>

			<view class="" style="margin: 0 20rpx;width: calc(100% - 40rpx);">
				<view class="" style="display: grid;grid-template-columns: repeat(3, 1fr);gap: 0px;">
					<view v-for="(item,index) in courses" style="padding: 10px;border-radius: 10rpx;">
						<view style="display: grid-row: inherit;;">
							<image :src="item" style="width: 100%;" mode="widthFix">
							</image>
							<view @click="goFree()"
								style="text-align: center;background: #FFEACD;color: #CD665E;height: 60rpx;border-radius: 20rpx;line-height: 60rpx;">
								免费领取
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<getFree :isUp="isFreeUp" @closeFree="toCloseFree" @getFreeWithData="freeWithData"></getFree>
		<getFreeSuccess :isUp="isFreeSuccessUp" @closeSuccessPop="toCloseSuccessFree"
			@freeSuccessWithData="successWithData">
		</getFreeSuccess>
	</view>
</template>
<script>
	const app = getApp();
	import {
		getMyHome
	} from '@/api/home.js';
	import {
		loginMobile,
	} from "@/api/user";
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import getFree from './components/getFree.vue';
	import getFreeSuccess from './components/getFreeSuccess.vue';
	export default {
		components: {
			getFree,
			getFreeSuccess
		},
		data() {
			return {
				isFreeUp: false,
				isFreeSuccessUp: false,
				current: 0,
				tabs: [
					'本期活动',
					'下期预告',
					'我的免费看',
				],
				courses: [
					'http://pic.mae.vip/11750564226527.jpg', 'http://pic.mae.vip/11750564226527.jpg',
					'http://pic.mae.vip/11750564226527.jpg', 'http://pic.mae.vip/11750564226527.jpg',
					'http://pic.mae.vip/11750564226527.jpg', 'http://pic.mae.vip/11750564226527.jpg',
				],
				topimage: '../../static/images/appH5/freetop.png',
				phoneNumber: '-1',
				userId: '-1',
				token: '-1',
				scrollDistance: 0,
				platform: uni.getSystemInfoSync().platform, //手机类型
			}
		},
		mounted: function() {
			let that = this;
		},
		methods: {
			goFree() {
				let that = this;
				that.isFreeUp = true;
			},
			toCloseFree(e) {
				let that = this;
				that.isFreeUp = false;
			},
			freeWithData(e) {
				let that = this;
				//console.log('123123')
				that.isFreeUp = false;
				that.isFreeSuccessUp = true;
			},
			toCloseSuccessFree(e) {
				let that = this;
				that.isFreeSuccessUp = false;
			},
			successWithData(e) {
				let that = this;
				that.isFreeSuccessUp = false;
			},
			changeTab(index) {
				console.log('当前选中索引：' + index)
			},
		}
	}
</script>

<style lang="scss" scoped>
	page,
	body {
		height: 100%;
		width: 100%;
		background-color: white;
	}

	.header {
		width: 100%;
		height: 180rpx;
	}

	.viewbg {
		width: 100%;
		height: 100%;
		background-image: url('~@/static/images/appH5/freetop.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		display: table;
	}
</style>